<div class="main-container">

  <div nz-row nzGutter="12">
    <div nz-col class="gutter-row" nzSpan="24">
      <div class="gutter-box">
        <nz-card [nzBordered]="false">
          <form nz-form [nzLayout]="'inline'" [formGroup]="searchForm">
            <nz-form-item>
              <nz-form-label>年份</nz-form-label>
              <nz-form-control>
                <nz-select formControlName="year" nzAllowClear nzPlaceHolder="年份"
                           style="width: 170px;">
                  <nz-option nzLabel="2019" nzValue="1"></nz-option>
                  <nz-option nzLabel="2020" nzValue="2"></nz-option>
                </nz-select>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item>
              <nz-form-label>重要级</nz-form-label>
              <nz-form-control>
                <nz-select [ngModel]="'1'" formControlName="level" nzAllowClear nzPlaceHolder="全部"
                           style="width: 170px;">
                  <nz-option nzLabel="类型1" nzValue="1"></nz-option>
                  <nz-option nzLabel="类型2" nzValue="2"></nz-option>
                </nz-select>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item>
              <nz-form-label>关键词</nz-form-label>
              <nz-form-control>
                <input formControlName="name" nz-input placeholder="关键词"/>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item>
              <nz-form-control>
                <button nz-button nzType="primary" (click)="queryInfo()"><i nz-icon nzType="search"></i>搜索</button>
                <button nz-button (click)="onAdd()" style="margin-left: 10px">新增</button>
              </nz-form-control>
            </nz-form-item>
          </form>
        </nz-card>

        <nz-card [nzBordered]="false">
          <nz-table
            #rowSelectionTable
            nzSize="middle"
            nzShowPagination
            nzShowSizeChanger
            [nzData]="listOfAllData"
            (nzCurrentPageDataChange)="currentPageDataChange($event)">
            <thead>
            <tr>
              <th
                nzWidth="62px"
                nzShowCheckbox
                [(nzChecked)]="allChecked"
                [nzIndeterminate]="indeterminate"
                (nzCheckedChange)="checkAll($event)"
              ></th>
              <th>调度事件标题</th>
              <th>时间</th>
              <th>重要级</th>
              <th>事件具体内容</th>
              <th>备注</th>
              <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let data of rowSelectionTable.data">
              <td nzShowCheckbox
                  [(nzChecked)]="mapOfCheckedId[data.id]"
                  (nzCheckedChange)="refreshStatus()">
              </td>
              <td>{{ data.title }}</td>
              <td>{{ data.time }}</td>
              <td>{{ data.level }}</td>
              <td>{{ data.content }}</td>
              <td>{{ data.remark }}</td>
              <td>
                <a (click)="openEditModal(data)">查看</a>
                <nz-divider nzType="vertical"></nz-divider>
                <a (click)="openEditModal(data)">修改</a>
                <nz-divider nzType="vertical"></nz-divider>
                <a nz-popconfirm nzPopconfirmTitle="确认删除？" nzPopconfirmPlacement="left"
                   (nzOnConfirm)="onDelete(data.id)">
                  删除
                </a>
              </td>
            </tr>
            </tbody>
          </nz-table>
        </nz-card>
      </div>

    </div>

  </div>

  <nz-modal [nzBodyStyle]="nzBodyStyle" nzWidth="660" [(nzVisible)]="modalShow" [nzTitle]="modalTitle"
            (nzOnCancel)="onCancel()" (nzOnOk)="onConfirm()">
    <form nz-form [formGroup]="form">
      <div nz-row [nzGutter]="24">
        <div nz-col [nzSpan]="12">
          <nz-form-item nzFlex>
            <nz-form-label [nzSm]="6" [nzXs]="24">标题</nz-form-label>
            <nz-form-control>
              <input nz-input formControlName="title" placeholder="标题">
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col [nzSpan]="12">
          <nz-form-item nzFlex>
            <nz-form-label [nzSm]="6" [nzXs]="24">时间</nz-form-label>
            <nz-form-control>
              <nz-date-picker formControlName="time"></nz-date-picker>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col [nzSpan]="12">
          <nz-form-item nzFlex>
            <nz-form-label [nzSm]="6" [nzXs]="24">重要级</nz-form-label>
            <nz-form-control>
              <nz-select formControlName="level" nzAllowClear  nzPlaceHolder="重要级">
               <nz-option *ngFor="let item of levelOption" [nzValue]="item.value" [nzLabel]="item.label"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col [nzSpan]="12">
          <nz-form-item nzFlex>
            <nz-form-label [nzSm]="6" [nzXs]="24">具体内容</nz-form-label>
            <nz-form-control>
              <textarea nz-input formControlName="content" rows="5" placeholder="具体内容"></textarea>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col [nzSpan]="12">
          <nz-form-item nzFlex>
            <nz-form-label [nzSm]="6" [nzXs]="24">备注</nz-form-label>
            <nz-form-control>
              <input nz-input formControlName="remark" placeholder="备注">
            </nz-form-control>
          </nz-form-item>
        </div>
      </div>
    </form>
  </nz-modal>
</div>
